<template>
  <div>
    <Table
      :table="table"
      :tableColumns="tableColumns"
      :loadTableList="loadTableList"
      :changePageSize="changePageSize"
      :changePage="changePage"
      :deleteMultipleSelectionUrl="$urls.API_URL_BACKSTAGE_SCHOOLCOURSE_MANAGE"
      :showDeleteButton="true"
      @addRow="addRow"
      @editRow="editRow"
    >
      <!--部门管理-->
      <template #schoolDepartment="scope">
        <span v-if="scope.row.schoolDepartment != null&&scope.row.schoolDepartment">
          {{ scope.row.schoolDepartment.name }}
        </span>
      </template>
      <!--专业管理 -->
      <template #schoolMajor="scope">
         <span v-if="scope.row.schoolMajor != null&&scope.row.schoolMajor">
          {{ scope.row.schoolMajor.name }}
        </span>
      </template>
      <!--课程负责人 -->
      <template #schoolTeacher="scope">
         <span v-if="scope.row.schoolTeacher != null&&scope.row.schoolTeacher">
          {{ scope.row.schoolTeacher.name }}
        </span>
      </template>
      <!--是否推荐-->
      <template #recommend="scope">
        <el-tag
          :type="`${scope.row.recommend==false ? 'info':scope.row.recommend==true ? 'success' : 'danger'}`">{{ dictToMap(yesOrNoDict).get(scope.row.recommend) }}
        </el-tag>
      </template>
    </Table>
  </div>
</template>

<script lang="ts" setup>
// 导入表格组件
import Table from '@/components/base/table/Table.vue';

// 接收父组件传递过来的的值
import { defineProps, getCurrentInstance, ref } from 'vue';
import { TableColumn, TableData } from '@/types/interface/base_interface';
import { Role } from '@/types/interface/auth_interface';
// 导入element插件对象
// import { ElMessage } from 'element-plus';
// 导入字典
import {
  dictToMap, departmentTypeDict, getDict, Option, userStatusDict, yesOrNoDict,
} from '@/api/dict';

// 接受父组件的值
interface Props {//  需要在父组件引入自定义的@/api/uem/useTableList.ts组件，然后将其中的部分属性传过来
  table: TableData, // 偷懒写法
  loadTableList:()=>void, // 重新加载表格
  changePageSize:()=>void, // 当每页数据显示数发生变化时触发的一个函数
  changePage:()=>void, // 当页面发生变化时触发的一个函数
}
const props = defineProps<Props>();
const { proxy } = getCurrentInstance();
// 初始化课程类别字典
const courseType:Option[] = await getDict('课程性质', 'number');
// 设置表格的列
// 定义表格所有的列字段信息
const tableColumns = ref<TableColumn[]>([
  {
    label: '课程',
    prop: 'name',
    width: 150,
    fixed: true,
  },
  {
    label: '是否推荐',
    prop: 'recommend',
    width: 100,
    type: 'custom',
  },
  {
    label: '部门',
    prop: 'schoolDepartment',
    type: 'custom',
    width: 150,
    fixed: true,
  },
  {
    label: '课程负责人',
    prop: 'schoolTeacher',
    type: 'custom',
    width: 100,
    fixed: true,
  },
  {
    label: '专业',
    prop: 'schoolMajor',
    fixed: true,
    type: 'custom', // 自定义的意思
    width: 150,
  },
  {
    label: '课程类型',
    prop: 'type',
    width: 100,
    type: 'dict',
    dict: courseType,
  },
  {
    label: '学分',
    prop: 'credit',
    type: 'int',
    width: 60,
  },
  {
    label: '学时',
    prop: 'period',
    type: 'int',
    width: 100,
  },
  {
    label: '时间',
    prop: 'createTime',
    width: 180,
  },
]);

// 点击添加按钮，交由父组件处理
const addRow = (id:number) => { // id是部门的主键，表示在该部门下添加子部门信息
  proxy.$emit('addRow', id);
};
// 编辑操作
const editRow = (row:Role):void => {
  proxy.$emit('editRow', row);
};
</script>
<style scoped>

</style>
